<template>
	<view class="cu-modal show" v-if="visible" @tap="closeModal">
		<view class="cu-dialog" @tap.stop="">
			<!-- 顶部标题栏 -->
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-video margin-right-sm"></text>
					<text class="text-black text-bold">视频播放</text>
				</view>
				<view class="action" @tap="closeModal">
					<text class="cuIcon-close text-grey"></text>
				</view>
			</view>
			
			<!-- 视频内容区域 -->
			<view class="video-content">
				<video 
					:id="videoId" 
					:src="videoUrl" 
					:autoplay="true"
					:controls="false"
					class="video-element"
					@error="onVideoError"
					@play="onVideoPlay"
					@pause="onVideoPause"
					@ended="onVideoEnded">
					<!-- 加载动画 -->
					<view class="cu-load load-modal" v-if="loading">
						<text class="cuIcon-loading1 cuIcon text-blue"></text>
						<text class="margin-top">视频加载中...</text>
					</view>
				</video>
				
				<!-- 自定义控制面板 -->
				<view class="padding" v-if="!loading">
					<view class="margin-bottom" v-if="duration > 0">
						<view class="cu-progress">
							<view class="bg-blue" :style="{width: (currentTime/duration)*100 + '%'}"></view>
						</view>
						<view class="flex justify-between margin-top-sm">
							<text class="text-gray text-sm">{{formatDuration(currentTime)}}</text>
							<text class="text-gray text-sm">{{formatDuration(duration)}}</text>
						</view>
					</view>
					
					<view class="flex justify-around">
						<button class="cu-btn round bg-blue" @tap="playOrPause">
							<text class="cuIcon" :class="isPlaying ? 'cuIcon-pause' : 'cuIcon-playfill'"></text>
							<text class="margin-left-sm">{{isPlaying ? '暂停' : '播放'}}</text>
						</button>
						
						<button class="cu-btn round bg-orange" @tap="replayVideo">
							<text class="cuIcon-refresh"></text>
							<text class="margin-left-sm">重播</text>
						</button>
						
						<button class="cu-btn round bg-green" @tap="toggleFullscreen">
							<text class="cuIcon-fullscreen"></text>
							<text class="margin-left-sm">全屏</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'VideoPlayer',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		videoUrl: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			videoId: 'videoPlayer' + Date.now(),
			isPlaying: false,
			loading: true,
			duration: 0,
			currentTime: 0,
			videoContext: null
		}
	},
	
	watch: {
		visible(newVal) {
			if (newVal) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.initVideo();
					}, 100);
				});
			} else {
				this.stopVideo();
			}
		}
	},
	
	methods: {
		// 初始化视频
		initVideo() {
			this.videoContext = uni.createVideoContext(this.videoId, this);
			this.loading = false;
			
			// 监听视频事件
			setTimeout(() => {
				this.getVideoInfo();
				this.startTimeUpdate();
			}, 500);
		},
		
		// 获取视频信息
		getVideoInfo() {
			if (this.videoContext) {
				try {
					const duration = this.videoContext.getDuration();
					this.duration = duration;
				} catch (err) {
					console.error('获取视频时长失败:', err);
				}
			}
		},
		
		// 播放/暂停
		playOrPause() {
			if (this.videoContext) {
				if (this.isPlaying) {
					this.videoContext.pause();
				} else {
					this.videoContext.play();
				}
			}
		},
		
		// 重播视频
		replayVideo() {
			if (this.videoContext) {
				this.videoContext.seek(0);
				this.videoContext.play();
			}
		},
		
		// 停止视频
		stopVideo() {
			if (this.videoContext) {
				this.videoContext.pause();
				this.videoContext.seek(0);
			}
			this.isPlaying = false;
			this.currentTime = 0;
		},
		
		// 开始时间更新
		startTimeUpdate() {
			if (this.videoContext) {
				this.timeUpdateInterval = setInterval(() => {
					if (this.isPlaying) {
						this.currentTime += 0.1;
					}
				}, 100);
			}
		},
		
		// 全屏切换
		toggleFullscreen() {
			if (this.videoContext) {
				this.videoContext.requestFullScreen();
			}
		},
		
		// 关闭模态框
		closeModal() {
			this.stopVideo();
			if (this.timeUpdateInterval) {
				clearInterval(this.timeUpdateInterval);
			}
			this.$emit('update:visible', false);
			this.$emit('close');
		},
		
		// 格式化时间
		formatDuration(seconds) {
			if (!seconds || seconds <= 0) return '00:00';
			
			const minutes = Math.floor(seconds / 60);
			const secs = Math.floor(seconds % 60);
			return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
		},
		
		// 视频事件处理
		onVideoPlay() {
			this.isPlaying = true;
		},
		
		onVideoPause() {
			this.isPlaying = false;
		},
		
		onVideoEnded() {
			this.isPlaying = false;
			this.currentTime = 0;
		},
		
		onVideoError(e) {
			console.error('视频播放错误:', e);
			uni.showToast({
				title: '视频播放失败',
				icon: 'none'
			});
			this.closeModal();
		}
	}
}
</script>

<style lang="scss" scoped>
/* 视频内容区域 */
.video-content {
	position: relative;
	width: 100%;
	background: #000000;
}

.video-element {
	width: 100%;
	height: 420rpx;
	background: #000000;
	border-radius: 0;
}

/* 响应式设计 */
@media (max-width: 375px) {
	.video-element {
		height: 380rpx;
	}
}

@media (min-width: 768px) {
	.video-element {
		height: 480rpx;
	}
}
</style>